<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>树精灵</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.upperBetaLimit = Math.PI / 2.2;
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            // ufo动画-精灵图集动画
            const spriteManagerUFO = new BABYLON.SpriteManager(
                "UFOManager",
                "../../src/imgs/ufo.png",
                1,
                { width: 128, height: 76 }
            );
            const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
            ufo.playAnimation(0, 16, true, 125);
            ufo.position.y = 5;
            ufo.position.z = 0;
            ufo.width = 2;
            ufo.height = 1;

            //精灵树
            const spriteManagerTrees = new BABYLON.SpriteManager(
                "treesManager",
                "../../src/imgs/palmtree.png",
                2000,
                { width: 512, height: 1024 },
                scene
            );
            //随机种植树
            for (let i = 0; i < 500; i++) {
                const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
                tree.position.x = Math.random() * (-30);
                tree.position.z = Math.random() * 20 + 8;
                tree.position.y = 0.5;
            }
            for (let i = 0; i < 500; i++) {
                const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
                tree.position.x = Math.random() * (25) + 7;
                tree.position.z = Math.random() * -35 + 8;
                tree.position.y = 0.5;
            }

            //天空盒
            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
            const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../src/imgs/skybox/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skybox.material = skyboxMaterial;

            // 导入模型
            BABYLON.SceneLoader.ImportMeshAsync("", "../../src/models/", "valleyvillage.glb");
            BABYLON.SceneLoader.ImportMeshAsync("", "../../src/models/", "car.glb").then(() => {
                const car = scene.getMeshByName("car");
                car.rotation = new BABYLON.Vector3(Math.PI / 2, 0, -Math.PI / 2);
                car.position.y = 0.16;
                car.position.x = -3;
                car.position.z = 8;

                const animCar = new BABYLON.Animation("carAnimation", "position.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

                const carKeys = [];

                carKeys.push({
                    frame: 0,
                    value: 10
                });

                carKeys.push({
                    frame: 200,
                    value: -15
                });

                animCar.setKeys(carKeys);

                car.animations = [];
                car.animations.push(animCar);

                scene.beginAnimation(car, 0, 200, true);

                //wheel animation
                const wheelRB = scene.getMeshByName("wheelRB");
                const wheelRF = scene.getMeshByName("wheelRF");
                const wheelLB = scene.getMeshByName("wheelLB");
                const wheelLF = scene.getMeshByName("wheelLF");

                scene.beginAnimation(wheelRB, 0, 30, true);
                scene.beginAnimation(wheelRF, 0, 30, true);
                scene.beginAnimation(wheelLB, 0, 30, true);
                scene.beginAnimation(wheelLF, 0, 30, true);
            });

            return scene;

        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>